<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>elementUI表格排序</title>
        <link rel="stylesheet" href="elementUI/theme-default/index.css" /> 
    </head>
    <body>
        <script src="http://unpkg.com/vue/dist/vue.js"></script>
        <script src="http://unpkg.com/element-ui@1.3.5/lib/index.js"></script>
        <div id="app">
        <template>
          <el-table :data="dataTable" border style="width: 100%">
            <el-table-column label="日期" sortable width="180">
                <template scope="scope">
                    <el-icon name="time"></el-icon>
                    <span style="margin-left:10px;">{{ scope.row.date }}</span>
                </template>            
            </el-table-column>
            <el-table-column label="姓名" width="180">
                <template scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>姓名：{{scope.row.name}}</p>
                        <p>地址:{{ scope.row.address }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag>{{ scope.row.name }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="地址" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="tag" label="标签" width="100" :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]" :filter-method="filterTag" filter-placement="bottom-end">
              <template scope="scope">
                <el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" close-transition>{{scope.row.tag}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
                </template>
            </el-table-column>
          </el-table>
        </template>
        </div>
        
        <script>
        var Main={
            data() {
                return {
                    dataTable:[
                    {
                        name:'邓小虎',
                        address:'湖南宁远中和镇邓家村二组',
                        tag:'家',
                        date:'1991-11-16'
                    },{
                        name:'邓小虎',
                        address:'上海',
                        tag:'公司',
                        date:'1991-11-16'
                    },{
                        name:'白小兔',
                        address:'河北邯郸',
                        tag:'家',
                        date:'1993-10-16'
                    },{
                        name:'白小兔',
                        address:'上海',
                        tag:'公司',
                        date:'2003-10-16'
                    },{
                        name:'邓小宝',
                        address:'湖南宁远',
                        tag:'家',
                        date:'2018-08-06'
                    },{
                        name:'邓小宝',
                        address:'河北邯郸',
                        tag:'公司',
                        date:'2030-10-16'
                    }
                    ]
                }
            },
            methods:{
                formatter(row,column) {
                    return row.address+':上海';
                },
                filterTag(value,row) {
                    return row.tag === value;
                },
                handleEidt(index,row) {
                    console.log(index,row);
                },
                handleDelete(index,row) {
                    console.log(index,row);
                }
            }
        };
        var Ctor = Vue.extend(Main);
        new Ctor().$mount('#app');

        // var vm=new Vue(
        //     {
        //         data() {
        //             return {
        //                 dataTable:[
        //                 {
        //                     name:'邓小虎',
        //                     address:'湖南宁远中和镇邓家村二组',
        //                     tag:'家',
        //                     date:'1991-11-16'
        //                 },{
        //                     name:'邓小虎',
        //                     address:'上海',
        //                     tag:'公司',
        //                     date:'1991-11-16'
        //                 },{
        //                     name:'白小兔',
        //                     address:'河北邯郸',
        //                     tag:'家',
        //                     date:'1993-10-16'
        //                 },{
        //                     name:'白小兔',
        //                     address:'上海',
        //                     tag:'公司',
        //                     date:'2003-10-16'
        //                 },{
        //                     name:'邓小宝',
        //                     address:'湖南宁远',
        //                     tag:'家',
        //                     date:'2018-08-06'
        //                 },{
        //                     name:'邓小宝',
        //                     address:'河北邯郸',
        //                     tag:'公司',
        //                     date:'2030-10-16'
        //                 }
        //                 ]
        //             }
        //         },
        //         methods:{
        //             formatter(row,column) {
        //                 return row.address+':上海';
        //             },
        //             filterTag(value,row) {
        //                 return row.tag === value;
        //             }
        //         }
        //     });
        </script>
    </body>
</html>